<template>
  <!-- 弹出框一 -->
  <vol-box :lazy="true" v-model="model1" title="批量绑定双深位" :width="1200" :height="1500" :padding="5"
    :onModelClose="onModelClose">
    <!-- <div style="height:400px;">弹出1框内容, 选中传入的行数据
      <p>
        {{ JSON.stringify(model1Rows) }}
      </p>
    </div> -->
    <vol-form ref="searchForm" labelPosition="left" :formRules="formOptions" :formFields="formFields">
    </vol-form>
    <template #footer>
      <div>
        <!-- <el-button type="primary" plain size="small" @click="callParent">调用生成(父)页面对象</el-button> -->
        <el-button type="primary" size="small" @click="closeModel1">确认</el-button>
        <el-button type="default" size="small" @click="model1 = false">关闭</el-button>
      </div>
    </template>
  </vol-box>


</template>
<script>
import VolBox from '@/components/basic/VolBox.vue';
import VolForm from "@/components/basic/VolForm.vue";

//这里使用的vue2语法，也可以写成vue3语法
export default {
  emits: ['parentCall'],
  components: { 'vol-box': VolBox, VolForm },
  methods: {},
  data() {
    return {
      model1: false,
      model1Rows: [], //弹出框1传入的选中行
      formFields: { 'warehouse_id': '', 'ZoneId': '', 'rack_outside_id': '', 'rack_inside_id': '' },
      formOptions: [

        [
          { "dataKey": "WMS_Warehouse", "data": [], "title": "仓库", "required": true, "field": "warehouse_id", "type": "select", "onChange": this.changeWh },
          { "dataKey": "WMS_Zone", "data": [], "title": "货区", "required": true, "field": "ZoneId", "onChange": this.changeZone, "type": "select" }
        ],
        [
          { "dataKey": "WMS_Rack", "data": [], "title": "外侧货架", "required": true, "field": "rack_outside_id", "type": "select" },
          { "dataKey": "WMS_Rack", "data": [], "title": "内侧货架", "required": true, "field": "rack_inside_id", "type": "select" }
        ]

      ],
      query: {
        page: 1,
        size: 10
      }
    };
  },
  methods: {
    openModel1() { //弹出框1
      this.model1 = true;
      this.$refs?.searchForm?.reset() //重置
    },
    changeWh(v) {
      let ZoneIdOption = this.formOptions.flat().find(i => i.field == 'ZoneId')
      ZoneIdOption.dataKeys = {
        key: 'ZoneId',
        value: ['ZoneCode', 'ZoneName'],
      }

      this.http
        .post('api/Wms_Warehouse/getDetailPage', {
          rows: 9999,
          value: v,
        })
        .then((r) => {
          ZoneIdOption.data = r.rows
        })
    },
    changeZone(v) {
      let RackOption1 = this.formOptions.flat().find(i => i.field == 'rack_outside_id')
      let RackOption2 = this.formOptions.flat().find(i => i.field == 'rack_inside_id')
      RackOption1.dataKeys = RackOption2.dataKeys = {
        key: 'RackId',
        value: ['RackCode', 'RackName'],
      }
      this.http
        .post('api/Wms_Rack/getPageData', {
          rows: 9999,
          wheres: JSON.stringify([
            {
              name: 'ZoneId',
              value: v
            }
          ]),
        })
        .then((r) => {
          RackOption1.data = RackOption2.data = r.rows
        })
    },
    closeModel1() {
      if (!this.formFields.rack_inside_id || !this.formFields.rack_outside_id) {
        return this.$message.info('内外侧货架均需要选择')
      }
      this.http
        .post('api/Wms_StockBind/BatchAddStockInfo', {
          ...this.formFields
        })
        .then((r) => {
          this.model1 = false
          this.$message.success('绑定成功')
          this.$emit('parentCall', $parent => {
            //$parent就是生成页面的对象，比如可以调用页面刷新，可获取的属性与方法见【生成页面文档】,$parent.xxx直接调用
            //调用刷新
            $parent.initDicKeys();
            $parent.search();
            //获取所有选中的行数据
            // $parent.getSelectRows();
          })
        })
    },

    // callParent() {
    //   this.$emit('parentCall', $parent => {
    //     //$parent就是生成页面的对象，比如可以调用页面刷新，可获取的属性与方法见【生成页面文档】,$parent.xxx直接调用
    //     //调用刷新
    //     $parent.search();
    //     //获取所有选中的行数据
    //     // $parent.getSelectRows();
    //     this.$message.success('调用了刷新')
    //   })
    // },
    onModelClose() {
      //this.$message.success('弹出框右上角点击x关闭事件')
    }
  }
};
</script>